<!DOCTYPE html>
<html lang="en">

<head>
  <%= require('utils')['inc']('meta') %>
  <title>首页</title>
</head>

<body>
  <!-- 侧滑导航根容器 -->
  <div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
    <!-- 菜单容器 -->
    <aside class="mui-off-canvas-right">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <!-- 菜单具体展示内容 -->
          <%= require('utils')['inc']('aside') %>
        </div>
      </div>
    </aside>
    <!-- 主页面容器 -->
    <div class="mui-inner-wrap">
      <!-- 主页面标题 -->
      <%= require('utils')['inc']('header') %>
      <div class="mui-content mui-scroll-wrapper bgWhite has-footer">
        <div class="mui-scroll">
          <!-- 主界面具体展示内容 -->
          <div class="index-container">

            <%= require('utils')['inc']('search/input') %>

            <div class="banner-wrap">
              <img src="<%= require('images/banner.png') %>" alt="" class="banner">
              <div class="icon-wrap">
                <div class="icon-list">
                  <img src="<%= require('images/banner-icon2.png') %>" alt="" class="icon">
                  <p class="icon-text">商标分类</p>
                </div>
                <div class="icon-list">
                  <img src="<%= require('images/banner-icon1.png') %>" alt="" class="icon">
                  <p class="icon-text">精品商标</p>
                </div>
                <div class="icon-list">
                  <img src="<%= require('images/banner-icon3.png') %>" alt="" class="icon">
                  <p class="icon-text">特价商标</p>
                </div>
                <div class="icon-list">
                  <img src="<%= require('images/banner-icon4.png') %>" alt="" class="icon">
                  <p class="icon-text">商标资讯</p>
                </div>
                <!-- <div class="icon-list">
                  <img src="<%= require('images/banner-icon5.png') %>" alt="" class="icon">
                  <p class="icon-text">服务咨询</p>
                </div> -->
              </div>
            </div>

            <div class="index-form-wrap">
              <form class="index-form">
                <h4 class="index-form-title">5折特惠通道</h4>
                <div class="form-btn-select">
                  <select class="index-select index-form-select-left left" name="select1">
                    <option value="">请选择商标所属行业</option>
                    <option value="item-2">item-2</option>
                    <option value="item-3">item-3</option>
                    <option value="item-4">item-4</option>
                    <option value="item-5">item-5</option>
                  </select>
                  <!-- <select class="index-select index-form-select-right right" name="select2">
                    <option value="">请选择价格区间</option>
                    <option value="item-2">item-2</option>
                    <option value="item-3">item-3</option>
                    <option value="item-4">item-4</option>
                    <option value="item-5">item-5</option>
                  </select> -->
                </div>
                <div class="form-input mui-input-row">
                  <input type="text" name="phone" class="mui-input-clear index-form-phone phone"
                    placeholder="请输入您的手机号码">
                </div>
                <div class="mui-button-row">
                  <input type="submit" class="mui-btn mui-btn-primary index-submit" value="获取商标信息" />
                </div>
              </form>
            </div>

            <div class="index-hot-wrap">
              <ul class="mui-table-view index-table-view">
                <li class="mui-table-view-cell index-table-view-cell">
                  <a href="#" class="mui-navigate-right index-more-right">热门商标分类</a>
                </li>
              </ul>
              <ul class="mui-table-view index-hot-grid-wrap">
                <li class="index-grid-list">
                  <a href="#">
                    <div class="img-box">
                      <img class="index-list-img" src="<%= require('images/hot_img1.png') %>" alt="">
                    </div>
                    <p class="index-list-text">服装商标</p>
                  </a>
                </li>
                <li class="index-grid-list">
                  <a href="#">
                    <div class="img-box">
                      <img class="index-list-img" src="<%= require('images/hot_img2.png') %>" alt="">
                    </div>
                    <p class="index-list-text">食品商标</p>
                  </a>
                </li>
                <li class="index-grid-list">
                  <a href="#">
                    <div class="img-box">
                      <img class="index-list-img" src="<%= require('images/hot_img3.png') %>" alt="">
                    </div>
                    <p class="index-list-text">化妆日用</p>
                  </a>
                </li>
                <li class="index-grid-list">
                  <a href="#">
                    <div class="img-box">
                      <img class="index-list-img" src="<%= require('images/hot_img4.png') %>" alt="">
                    </div>
                    <p class="index-list-text">家用电器</p>
                  </a>
                </li>
                <li class="index-grid-list">
                  <a href="#">
                    <div class="img-box">
                      <img class="index-list-img" src="<%= require('images/hot_img5.png') %>" alt="">
                    </div>
                    <p class="index-list-text">医药用品</p>
                  </a>
                </li>
                <li class="index-grid-list">
                  <a href="#">
                    <div class="img-box">
                      <img class="index-list-img" src="<%= require('images/hot_img6.png') %>" alt="">
                    </div>
                    <p class="index-list-text">电子电脑</p>
                  </a>
                </li>
              </ul>
            </div>

            <div class="index-jx-wrap">
              <ul class="mui-table-view index-table-view jx-table-view">
                <li class="mui-table-view-cell index-table-view-cell">
                  <a href="#" class="mui-navigate-right index-more-right">精选商标推荐</a>
                </li>
              </ul>
              <ul class="mui-table-view index-jx-grid-wrap">
                <li class="index-grid-list">
                  <a href="#">
                    <div class="img-box">
                      <img class="index-list-img" src="<%= require('images/trademark.png') %>" alt="">
                    </div>
                    <div class="index-list-text-wrap">
                      <div class="name-fenlei">
                        <p class="name">嘉朵依-CNXTUEH-长本文展示长本文展示长本文展示</p>
                        <p class="fenlei">43类商标</p>
                      </div>
                      <p class="price">0.*0万元</p>
                    </div>
                  </a>
                </li>
                <li class="index-grid-list">
                  <a href="#">
                    <div class="img-box">
                      <img class="index-list-img" src="<%= require('images/trademark.png') %>" alt="">
                    </div>
                    <div class="index-list-text-wrap">
                      <div class="name-fenlei">
                        <p class="name">嘉朵依-CNXTUEH</p>
                        <p class="fenlei">43类商标</p>
                      </div>
                      <p class="price">0.*0万元</p>
                    </div>
                  </a>
                </li>
                <li class="index-grid-list">
                  <a href="#">
                    <div class="img-box">
                      <img class="index-list-img"
                        src="https://tse2-mm.cn.bing.net/th/id/OIP.F_9st5VrmrKoO2euzqKi1gAAAA?w=165&h=180&c=7&o=5&pid=1.7"
                        alt="">
                    </div>
                    <div class="index-list-text-wrap">
                      <div class="name-fenlei">
                        <p class="name">嘉朵依-CNXTUEH</p>
                        <p class="fenlei">43类商标</p>
                      </div>
                      <p class="price">0.*0万元</p>
                    </div>
                  </a>
                </li>
                <li class="index-grid-list">
                  <a href="#">
                    <div class="img-box">
                      <img class="index-list-img" src="<%= require('images/trademark.png') %>" alt="">
                    </div>
                    <div class="index-list-text-wrap">
                      <div class="name-fenlei">
                        <p class="name">嘉朵依-CNXTUEH</p>
                        <p class="fenlei">43类商标</p>
                      </div>
                      <p class="price">0.*0万元</p>
                    </div>
                  </a>
                </li>
                <li class="index-grid-list">
                  <a href="#">
                    <div class="img-box">
                      <img class="index-list-img" src="<%= require('images/trademark.png') %>" alt="">
                    </div>
                    <div class="index-list-text-wrap">
                      <div class="name-fenlei">
                        <p class="name">嘉朵依-CNXTUEH</p>
                        <p class="fenlei">43类商标</p>
                      </div>
                      <p class="price">0.*0万元</p>
                    </div>
                  </a>
                </li>
                <li class="index-grid-list">
                  <a href="#">
                    <div class="img-box">
                      <img class="index-list-img"
                        src="https://tse2-mm.cn.bing.net/th/id/OIP.QTX6pOrx6VmIro4EBoRIwgHaCu?w=341&h=128&c=7&o=5&pid=1.7"
                        alt="">
                    </div>
                    <div class="index-list-text-wrap">
                      <div class="name-fenlei">
                        <p class="name">嘉朵依-CNXTUEH</p>
                        <p class="fenlei">43类商标</p>
                      </div>
                      <p class="price">0.*0万元</p>
                    </div>
                  </a>
                </li>
              </ul>
            </div>

            <div class="index-slider-wrapper">
              <div id="slider" class="mui-slider index-slider">
                <div id="sliderSegmentedControl"
                  class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative">
                  <a class="mui-control-item mui-active" href="#item1mobile">新闻资讯</a>
                  <a class="mui-control-item" href="#item2mobile">商标转让</a>
                  <a class="mui-control-item" href="#item3mobile">商标知识</a>
                  <a class="mui-control-item" href="#item4mobile">商标法律</a>
                </div>
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
                <div class="mui-slider-group">
                  <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                    <div id="scroll1">
                      <ul class="mui-table-view">
                        <% for (var i=1; i<=7; i++) { %>
                        <li class="mui-table-view-cell">
                          <a href="#">第一个选项卡子项-<%= i %></a>
                        </li>
                        <% } %>
                      </ul>
                    </div>
                  </div>
                  <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <div id="scroll2">
                      <ul class="mui-table-view">
                        <% for (var i=1; i<=7; i++) { %>
                        <li class="mui-table-view-cell">
                          <a href="#">第二个选项卡子项-<%= i %></a>
                        </li>
                        <% } %>
                      </ul>
                    </div>
                  </div>
                  <div id="item3mobile" class="mui-slider-item mui-control-content">
                    <div id="scroll3">
                      <ul class="mui-table-view">
                        <% for (var i=1; i<=7; i++) { %>
                        <li class="mui-table-view-cell">
                          <a href="#">第三个选项卡子项-<%= i %></a>
                        </li>
                        <% } %>
                      </ul>
                    </div>
                  </div>
                  <div id="item4mobile" class="mui-slider-item mui-control-content">
                    <div id="scroll3">
                      <ul class="mui-table-view">
                        <% for (var i=1; i<=7; i++) { %>
                        <li class="mui-table-view-cell">
                          <a href="#">第四个选项卡子项-<%= i %></a>
                        </li>
                        <% } %>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="contcat-wrap">
              <p class="text">24小时服务热线：<a href="tel:13366415310">13366415310</a> <a
                  href="tel:13366415310">13366415310</a></p>
            </div>

            <div class="copyright">
              鄂ICP备16025661号-1 粤公网安备 44010602000622号 <br />
              电话：400-888-1139
            </div>

          </div>
        </div>
      </div>
      <!-- off-canvas backdrop -->
      <div class="mui-off-canvas-backdrop"></div>
      <%= require('utils')['inc']('footer') %>
    </div>
  </div>

  <%= require('utils')['inc']('search/popover') %>
</body>

</html>